import { defineComponent } from "vue";

import {
  ButtonFactory,
  CarouselFactory,
  ElementFactory,
  FlexFactory,
  ImageFactory,
} from "../factory/index";

export default defineComponent({
  name: "home",
  setup() {
    const carousel = new CarouselFactory();
    const next = () => carousel.next();
    const prev = () => carousel.prev();

    return () =>
      new ElementFactory()
        .setProps({
          tag: "div",
        })
        .setAttrs({
          style: {
            padding: "20px",
          },
        })
        .setDefault(
          new FlexFactory()
            .setProps({
              vertical: true,
            })
            .setDefault([
              carousel
                .setProps({
                  autoplay: true,
                })
                .setDefault([
                  new ImageFactory()
                    .setProps({
                      src: "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg",
                    })
                    .create(),
                  new ImageFactory()
                    .setProps({
                      src: "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg",
                    })
                    .create(),
                  new ImageFactory()
                    .setProps({
                      src: "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg",
                    })
                    .create(),
                  new ImageFactory()
                    .setProps({
                      src: "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg",
                    })
                    .create(),
                ])
                .create(),
              new FlexFactory()
                .setDefault([
                  new ButtonFactory()
                    .setProps({
                      onClick: () => prev(),
                    })
                    .setDefault("prev")
                    .create(),
                  new ButtonFactory()
                    .setProps({
                      onClick: () => next(),
                    })
                    .setDefault("next")
                    .create(),
                ])
                .create(),
            ])
            .create()
        )
        .create();
  },
});
